<template>
    <div
        class="ec-nav"
        :class="{
            'ec-nav1': styleValue === '样式1'
        }">
        <ul
            :style="{
                padding: styleListValue.indexOf('整体边距') !== -1 && styleValue === '样式2' ? '.4rem' : '',
                borderTop: styleListValue.indexOf('边框') !== -1 && styleValue === '样式2' ? '' : '',
            }"
            :class="{
                border: styleListValue.indexOf('边框') !== -1 && styleValue === '样式2',
                padding: styleListValue.indexOf('内边距') !== -1 && styleValue === '样式2',
            }"
            v-if="data.list.length > 0">
            <li
                v-for="(item, index) in data.list"
                :style="{
                    width: styleValue === '样式2' ? `${100 / numberValue}%` : '',
                    borderTop: index < 3 ? '' : '0',
                    borderRightColor: (index + 1) % numberValue === 0 ? '#fff' : ''
                }"
                :key="index">
                <a :href="item.url" v-if="!preview"></a>
                <img
                    :src="item.img"
                    alt=""
                    v-if="showIcon" />
                <span v-if="showDesc">
                    {{ item.title || '[描述]' }}
                </span>
            </li>
        </ul>
        <p class="no-info" v-else>
            [请在编辑区域增加广告位]
        </p>
    </div>
</template>

<script>
// mixins
export default {
    name: 'ec-nav',
    props: ['data', 'preview'],
    data() {
        return {}
    },
    computed: {
        numberValue() {
            return parseFloat(this.data.numberValue)
        },
        styleValue() {
            return this.data.styleValue
        },
        styleListValue() {
            return this.data.styleListValue
        },
        showIcon() {
            return this.data.allValue.showIcon
        },
        showDesc() {
            return this.data.allValue.showDesc
        }
    }
}
</script>

<style lang="less" scoped>
@import '~@/assets/style/theme/index-m';
.ec-nav {
    ul {
        overflow: hidden;
        background: #fff;
        li {
            display: block;
            float: left;
            text-align: center;
            position: relative;
            img {
                width: 100%;
                display: block;
            }
            span {
                padding: 0.4rem 0;
                font-size: 1.3rem;
                display: block;
            }
            a {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
        }
        &.border {
            li {
                border-right: 1px solid @border-color-split;
                border-bottom: 1px solid @border-color-split;
            }
        }
        &.padding {
            li {
                padding: 0.6rem;
            }
        }
    }
}
.ec-nav.ec-nav1 {
    li {
        width: 100%;
        padding: .6rem;
        border-bottom: 1px solid @border-color-split;
        text-align: left;
        img{
            width: 2.6rem;
            height: 2.6rem;
            float:left;
            margin-right: 1rem;
        }
        span{
            padding: 0;
            height: 2.6rem;
            line-height: 2.6rem;
        }
    }
}
</style> 